<template>
  <div class="chart-container">
    <canvas width="1200" height="300" ref="chartRef"></canvas>
    <div class="e-select">
      <el-select
        v-model="alarmStatus"
        multiple
        placeholder="请选择"
        clearable
        style="width: 200px"
        @change="handleSelectChange"
      >
        <el-option v-for="dict in legendData" :key="dict" :label="dict" :value="dict" />
      </el-select>
    </div>
    <div class="my-time">
      {{ myTime }}
    </div>
  </div>
</template>

<script setup>
  import { onMounted, ref, nextTick, defineProps } from 'vue';
  import * as echarts from 'echarts';
  import { getCurveInfo } from '@/api/auth/ledger.js';
  import { tagsStore } from '@/stores';
  import DeviceSearch from '@/views/home/components/DeviceSearch.vue';
  const emit = defineEmits();
  const props = defineProps(['myTime', 'attrGroupName']);
  const authNav = tagsStore();
  const chartRef = ref(null);
  const myChart = ref(null);
  const option = ref(null);
  const title = ref(null);
  const listPages = ref([]);
  const legendData = ref([]);
  const alarmStatusList = ref([]);
  const statusList = ref([]);
  const xAxisDatas = ref([
    '00:00',
    '02:00',
    '04:00',
    '06:00',
    '08:00',
    '10:00',
    '12:00',
    '14:00',
    '16:00',
    '18:00',
    '20:00',
    '22:00',
    '24:00'
  ]);
  const xAxisData = ref([]);
  const seriesData = ref([]);
  const alarmStatus = ref([]);
  const params = ref({
    deviceCode: '',
    attrGroupName: '',
    createTime: ''
  });
  onMounted(() => {
    nextTick(() => {
      getXAxisData();
      // curveInfo();
    });
  });
  function getXAxisData() {
    // 生成 "00:00" 到 "23:50" 的时间点
    for (let hour = 0; hour < 24; hour++) {
      for (let minute = 0; minute <= 50; minute += 10) {
        const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
        xAxisData.value.push(timeStr);
      }
    }
    // 添加 "00:00" 和 "24:00" 作为特殊项
    // xAxisData.value.unshift('00:00');
    xAxisData.value.push('24:00');
    console.log(xAxisData.value);
  }
  function handleSelectChange(newValue) {
    // newValue 是当前选中的值的数组
    console.log('选中的值:', newValue, alarmStatusList.value, seriesData.value, statusList.value);
    if (newValue.length > 0) {
      const matchedData = newValue
        .map((selectedValue) => {
          console.log('matchedData:', selectedValue);
          // 找到 seriesData 中 attrName 与 selectedValue 相等的第一个对象
          const match = statusList.value.find((item) => item.name === selectedValue);
          return match; // 返回匹配的对象
        })
        .filter(Boolean); // 过滤掉未找到的 undefined 值
      seriesData.value = matchedData;
      chartDomFun();
      // 输出匹配的数据
      console.log('seriesData.value:', matchedData);
      // 更新图表的 series 数据

      // 这里可以执行您需要的逻辑，如提交选中的值等
    } else {
      console.log('matchedData:111', statusList.value);
      seriesData.value = statusList.value;
      chartDomFun();
    }
    // 使用 Array.prototype.filter 方法匹配数据
  }
  function curveInfo(attrGroupName, createTime) {
    params.value.attrGroupName = attrGroupName;
    params.value.createTime = createTime;
    params.value.deviceCode = authNav.deviceCode;
    alarmStatus.value = [];
    const createTimeDate = new Date(createTime);
    createTimeDate.setHours(0, 0, 0, 0); // 设置时间为当天的开始
    // 获取当前时间的 Date 对象
    const now = new Date();

    // 检查当前日期是否与 createTime 相同

    getCurveInfo(params.value).then((res) => {
      console.log(res.data.length);
      if (res.data.length === 0) {
        seriesData.value = [];
        statusList.value = [];
        if (myChart.value !== null) {
          myChart.value.dispose(); // 销毁图表
        }
        return;
      }
      alarmStatusList.value = res.data;
      seriesData.value = [];
      statusList.value = [];
      // const convertedData = {};
      const records = res.data; // 后端返回的数据数组
      title.value = '单位' + '(' + records[0].pointUnit + ')';
      // 存储所有属性的最终结果
      const allSeriesData = [];
      if (
        now.getDate() === createTimeDate.getDate() &&
        now.getMonth() === createTimeDate.getMonth() &&
        now.getFullYear() === createTimeDate.getFullYear()
      ) {
        // 如果相同，格式化当前时分
        const currentHour = now.getHours().toString().padStart(2, '0');
        const currentMinute = now.getMinutes().toString().padStart(2, '0');
        const currentHourMin = `${currentHour}:${currentMinute}`;
        console.log('当前时分:', currentHourMin);
        const hourMin = timeStringsToTenMinutes(currentHourMin); //当前时分
        records.forEach((record) => {
          const { voList } = record;
          const convertedData = {};
          // 转换时间数据到 convertedData 对象
          voList.forEach((data) => {
            const { createTime, pointVal } = data;
            const minutes = timeStringsToTenMinutes(createTime);
            convertedData[minutes] = pointVal;
          });
          // 初始化 result 数组，长度为 24 * 6，即 144（一天的10分钟间隔）
          const result = new Array(145).fill(null);
          // 填充 result 数组
          Object.keys(convertedData).forEach((key) => {
            const timeIndex = parseInt(key, 10);
            if (Number.isInteger(timeIndex) && timeIndex >= 0 && timeIndex < result.length) {
              result[timeIndex] = convertedData[key];
            }
          });
          // 填充缺失的数据点，如果下一个数据点没有数据，则使用当前数据点的值
          // 如果已经到达数组的最后一个元素，则后面的值都为 0
          for (let k = 0; k <= hourMin; k++) {
            if (result[k] === null) {
              const prevValue = k > 0 ? result[k - 1] : 0;
              result[k] = prevValue;
            }
          }

          // 如果时间点大于当前时分，不填充数据或设为 0
          for (let k = hourMin; k < result.length; k++) {
            result[k] = null;
          }
          // 将处理后的数据添加到 allSeriesData 数组中
          seriesData.value.push({
            name: record.atrrName,
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: result
          });
          statusList.value.push({
            name: record.atrrName,
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: result
          });
        });
        legendData.value = records.map((item) => item.atrrName);
        chartDomFun();
        // 执行其他需要的逻辑
      } else {
        records.forEach((record) => {
          const { voList } = record;
          const convertedData = {};
          // 转换时间数据到 convertedData 对象
          voList.forEach((data) => {
            const { createTime, pointVal } = data;
            const minutes = timeStringsToTenMinutes(createTime);
            convertedData[minutes] = pointVal;
          });
          // 初始化 result 数组，长度为 24 * 6，即 144（一天的10分钟间隔）
          const result = new Array(145).fill(null);
          // 填充 result 数组
          Object.keys(convertedData).forEach((key) => {
            const timeIndex = parseInt(key, 10);
            if (Number.isInteger(timeIndex) && timeIndex >= 0 && timeIndex < result.length) {
              result[timeIndex] = convertedData[key];
            }
          });
          // 填充缺失的数据点，如果下一个数据点没有数据，则使用当前数据点的值
          // 如果已经到达数组的最后一个元素，则后面的值都为 0
          for (let k = 0; k < result.length; k++) {
            if (result[k] === null) {
              const prevValue = k > 0 ? result[k - 1] : 0;
              result[k] = prevValue;
            }
          }
          // 将处理后的数据添加到 allSeriesData 数组中
          seriesData.value.push({
            name: record.atrrName,
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: result
          });
          statusList.value.push({
            name: record.atrrName,
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: result
          });
        });
        legendData.value = records.map((item) => item.atrrName);
        chartDomFun();
        // 如果不相同，执行其他逻辑
        console.log('日期不匹配');
      }

      // 此处的 allSeriesData 包含了所有属性的曲线数据，可以用于图表显示或其他逻辑
      console.log('allSeriesData', seriesData.value);
    });
  }
  function timeStringsToTenMinutes(timeString) {
    const [hours, minutes] = timeString.split(':').map(Number);
    // 将小时转换为10分钟间隔的分钟数，即小时数乘以6
    const hoursInTenMinutes = hours * 6;
    // 将分钟转换为10分钟间隔的分钟数，即分钟数除以10并向下取整
    const minutesInTenMinutes = Math.floor(minutes / 10);
    // 返回总的10分钟间隔的分钟数
    return hoursInTenMinutes + minutesInTenMinutes;
  }

  const chartDomFun = () => {
    if (myChart.value !== null) {
      myChart.value.dispose(); // 销毁图表
    }
    const chartDom = chartRef.value;
    myChart.value = echarts.init(chartDom);
    option.value = {
      width: '1140px',
      height: '240px',
      title: {
        text: title.value, // 初始垂直位置为中间
        x: 20, // 向右偏移20px
        y: 20,
        textStyle: {
          fontSize: 14, // 标题字体大小
          color: '#ffffff' // 标题字体颜色
        }
      },
      legend: {
        selectedMode: false,
        data: legendData.value,
        textStyle: {
          color: '#fff' // 设置图例字体颜色为白色
        }
      },
      grid: {
        left: '3%',
        right: '0',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {
            show: false // 隐藏下载按钮
          }
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xAxisData.value,
        axisLabel: {
          margin: 15,
          showMinLabel: false, // 隐藏小刻度的标签
          color: '#fff', // 设置字体颜色为白色
          // show: true, // 显示刻度标签
          formatter: function (value) {
            // 仅当时间点在 visibleTimeLabels 中时，才显示标签
            return xAxisDatas.value.includes(value) ? value : '';
          }
        }
      },
      yAxis: {
        type: 'value',
        splitNumber: 4,
        minorTick: { show: false, splitNumber: 4 },
        axisLabel: {
          color: '#fff',

          formatter: function (value) {
            // 给 y 轴标签添加单位 'kV'
            return value;
          } // 设置字体颜色为白色
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#eee', // 轴线颜色
            width: 1, // 轴线宽度
            opacity: '0.36'
          }
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross' // 启用十字准线
        }
        // 其他 tooltip 配置项
      },
      series: seriesData.value
    };

    if (myChart.value !== null && option.value) {
      myChart.value.setOption(option.value);
    }
  };
  // 确保在组件卸载时销毁图表实例
  onUnmounted(() => {
    if (myChart.value !== null) {
      myChart.value.dispose();
    }
  });
  defineExpose({
    curveInfo
  });
</script>

<style lang="scss" scoped>
  .chart-container {
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
    position: relative;

    .e-select {
      position: absolute;
      top: 20px;
      right: 32px;
      z-index: 999;
    }
    .my-time {
      position: absolute;
      top: 28px;
      right: 252px;
      z-index: 999;
      color: #fff;
    }
  }
  :deep(.el-select__selection .el-tag) {
    background-color: #0a1736 !important;
    color: #fff !important;
  }
  :deep(.el-select__tags .el-tag .el-icon-close) {
    color: #fff !important;
  }
  :deep(.el-select-dropdown__item.selected) {
    color: #fff !important;
    background-color: #2d8cf0 !important;
  }
  :deep(.el-select-dropdown__item) {
    color: #fff !important;
  }
  :deep(.el-select-dropdown__item.hover) {
  }
</style>
<style>
  .echarts-toolbox button:nth-child(1) {
    display: none !important;
  }
</style>
